<template>
	<!-- 底部导航 -->
	<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
			<!-- <view class="image-wrap" v-if="index == 0 || index == 2 || index == 3"> -->
			<view class="image-wrap">
				<image class="item-img" :src="item.iconPath" v-if="current == index" :style="{width: item.width, height: item.height}"></image>
				<image class="item-img"  :src="item.icon" v-else :style="{width: item.width, height: item.height}"></image>
			</view>
			<!-- <view class="image-scan" v-else>
				<view class="circle"></view>
				<image src="../static/二维码.png"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: Number
		},
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				list: [{
						text: '资讯', //首页
						icon: '/static/tabbar/zixun-tuya.png', //未选中图标
						iconPath: '/static/tabbar/zixun-active-tuya.png',
						path: "/pages/index/index", 
						width: "64rpx",
						height: "88rpx"
					},
					{
						text: '门票和会员', //喜欢
						icon: '/static/tabbar/vip-tuya.png',
						iconPath: '/static/tabbar/vip-active-tuya.png',
						path: "/pages/vip/vip", 
						width: "104rpx",
						height: "112rpx"
					},
					{
						text: '商店', //通知
						icon: '/static/tabbar/shop-tuya.png',
						iconPath: '/static/tabbar/shop-active-tuya.png',
						path: "/pages/shop/shop", 
						width: "132rpx",
						height: "112rpx"
					},
					{
						text: '我的', //我的
						icon: '/static/tabbar/my-tuya.png',
						iconPath: '/static/tabbar/my-active-tuya.png',
						path: "/pages/my/my", 
						width: "64rpx",
						height: "88rpx"
					}
				]
			};
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		
		methods: {
			tabbarChange(path) {
				uni.reLaunch({
					url: path
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.tabbarActive {
		color: #79D5AD !important;
	}

	.tabbar {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 180rpx;
		background: #FFFFFF;
		z-index: 999999;
		border-radius: 80rpx 80rpx 0rpx 0rpx;
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100rpx;
	}
	
	.image-wrap {
		width: 130rpx;
		height: 110rpx;
		text-align: center;
	}
	
	.image-scan {
		position: absolute;
		top: -65rpx;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background-color: #fff;
		.circle {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			top: 10rpx;
			left: -50%;
			right: -50%;
			margin: 0 auto;
			border-radius: 50%;
			background-color: #382daf;
		}
		image {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			left: -50%;
			right: -50%;
			margin: 0 auto;
			top: 40rpx;
		}
	}

	.item-img {
		width: 130rpx;
		height: 130rpx;
	}

</style>